<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>拖动事件</title>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.box{
			-webkit-overflow-scrolling: touch;
			width: 200px;
			height: 200px;
			background: pink;
			float: left;
		}
	</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
//window.onload 加载完之后执行
window.onload = function () {
	var box = document.querySelector('.box');
	var width = box.offsetWidth;
	var startX,startY,isMove=false;
	var lastTranslateX = 0;
    var lastTranslateY = 0;
    var translateX;
   	var translateY;
	box.addEventListener('touchstart',function (e) {
		startX = e.touches[0].clientX;
		startY = e.touches[0].clientY;
		
	});
	box.addEventListener('touchmove',function (e) {
		var moveX = e.touches[0].clientX;
		var moveY = e.touches[0].clientY;
        /*计算位移  有正负方向*/
        distanceX = moveX - startX;
        distanceY = moveY - startY;
        /*计算目标元素的位移  不用管正负*/
        /*元素将要的定位=当前定位+手指移动的距离*/
        // 判断是否滑动，第二次滑动时再计算translateX += distanceX
  		translateX = lastTranslateX + distanceX;
       	translateY = lastTranslateY + distanceY;
        // console.log(isMove);
       	// if (isMove) {
       	// 	var translateX = distanceX;
       	// 	var translateY = distanceY;
       	// }else{
       	// 	translateX = (translateX>0? (translateX += distanceX):distanceX);
        // 	translateY = (translateY>0? (translateY += distanceY):distanceY);
       	// 	// translateX += distanceX
       	// 	// translateY += distanceY;
       	// }
        
        /*滑动--->元素随着手指的滑动做位置的改变*/
        box.style.transform = 'translate(' + translateX + 'px,'+translateY+'px)';
        box.style.webkitTransform = 'translate(' + translateX + 'px,'+translateY+'px)';

        isMove = true;


		console.log('touchmove');
	});
	box.addEventListener('touchend',function (e) {

		lastTranslateX = translateX;
        lastTranslateY = translateY;
        isMove = false;
		console.log('touchend');
		// console.log(translateX);
		console.log(box.style.transform);
	});
	box.addEventListener('click',function (e) {
		console.log('click');
		console.log(e);
	});
}

</script>
</body>
</html>